import { useState } from 'react'
import { Layout, Menu, theme } from 'antd'
import { useNavigate, useLocation } from 'react-router'
import { useSelector } from 'react-redux'
import { globalConfig } from '@/globalConfig'
import { HomeOutlined, MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons'
import './sider.styl'

const AntdSider = Layout.Sider
const { useToken } = theme

function Sider() {
  const globalTheme = useSelector(state => state.theme)

  const { token } = useToken()

  const location = useLocation()

  const navigate = useNavigate()

  const [collapsed, setCollapsed] = useState(false)

  const items = [
    {
      label: '首页',
      key: '/home',
      icon: <HomeOutlined />,
      children: null,
      type: null,
      onClick: () => {
        // 跳转至路径地址/home
        navigate('/home')
      },
    },
    {
      label: '用户管理',
      key: '/users',
      icon: <UserOutlined />,
      children: null,
      type: null,
      onClick: () => {
        // 跳转至路径地址/users
        navigate('/users')
      },
    },
    {
      label: '用户详情',
      key: '/users/details',
      icon: <UserOutlined />,
      children: null,
      type: null,
      onClick: () => {
        // 跳转至路径地址/users/details
        navigate('/users/details')
      },
    },
  ]

  const onCollapse = () => {
    setCollapsed(!collapsed)
  }

  let siderTheme = 'dark'
  if(globalConfig.siderTheme === 'light') {
    siderTheme = 'light'
  } else if(globalConfig.siderTheme === 'theme') {
    globalTheme.dark ? (siderTheme = 'dark') : (siderTheme = 'light')
  }

  const fullWidth = 200
  const collapsedWidth = 49

  return (
    <AntdSider className='M-sider' trigger={ null } collapsible collapsed={ collapsed } collapsedWidth={ collapsedWidth } width={ fullWidth } theme={ siderTheme } style={{ backgroundColor: token.colorBgContainer, borderColor: token.colorBorderSecondary }}>
      <div className='sider-main'>
        <Menu mode='inline' selectedKeys={ location.pathname } items={ items } className='sider-menu'></Menu>
        <div className='sider-footer' onClick={ onCollapse } style={{ color: token.colorTextBase, borderTopColor: token.colorBorder }}>
          { collapsed ? <MenuUnfoldOutlined />  : <MenuFoldOutlined /> }
        </div>
      </div>
    </AntdSider>
  )
}

export default Sider
